<template>
  <div>
    <vxe-grid
      class="vxeMainTable"
      ref="vxeTable"
      v-bind="{
        border: true,
        stripe: true,
        showOverflow: true,
        showHeadeOoverflow: true,
        showFooterOverflow: true,
        showFooter: true,
        columnConfig: { resizable: true },
        rowConfig: { isCurrent: true },
        showOverflow: true,
        align: 'center',
        height: clientHeight,
        columns: columns,
      }"
      :data="tableData"
      @cell-click="cellClick"
    ></vxe-grid>
  </div>
</template>

<script>
import { render, h } from "vue";
import { regisScrollEvent, removeScrollEvent } from "util/index.js";
export default {
  name: "App",
  props: {
    saltId: {
      type: String,
      default: "",
    },
    columns: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    clientHeight: {
      type: Number,
      default: () => {
        return 0;
      },
    },
  },
  created() {
    console.log("created........");
  },
  data() {
    return {
      rowIndex: "",
    };
  },
  methods: {
    cellClick({ row, column, rowIndex, columnIndex }) {
      console.log("row", row);
      this.rowIndex = rowIndex;
      this.$emit("cellClick", { row, column, rowIndex, columnIndex });
    },
    setRowClass({ row, rowIndex }) {
      if (this.rowIndex === rowIndex) {
        return "row-active";
      } else {
        return "";
      }
    },
  },
  mounted() {
    regisScrollEvent("vxeMainTable", () => {
      this.$emit("touchScroll");
    });
  },
  beforeUnmount() {
    removeScrollEvent("vxeMainTable");
  },
};
</script>     

<style scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
/deep/ .vxe-table--body .vxe-body--row.row-active {
  background-color: #d9e1ff !important;
}
</style>
